<template>
    <div id="Content">
        <div id="BackLink">
            <a href="/Main">Return to Main Menu</a>
        </div>

        <div id="Catalog">

            {{categoryId}}

            <table>
                <tr>
                    <th>Product ID</th>
                    <th>Name</th>
                </tr>
                <tr v-for="product in products">
                    <td><router-link :to="'/catalog/product?productId=' + product.productId">{{product.productId}}</router-link></td>
                    <td>{{product.name}}</td>
                </tr>
            </table>

        </div>
    </div>
</template>

<script>
    export default {
        name: "Category",
        data(){
            return {
                categoryId: '',
                products: [
                    {
                        productId: '',
                        name: ''
                    }
                ]
            }
        },
        created()
        {
            const _this = this
            axios.get('http://localhost:8088/catalog/categories/' + this.$route.query.categoryId).then(function (resp) {
                _this.categoryId = resp.data.data.categoryId
                //console.log(resp.data.data.categoryId)
            })
            axios.get('http://localhost:8088/catalog/categories/' + this.$route.query.categoryId + '/products').then(function (resp) {
                _this.products = resp.data.data
                // console.log(resp)
            })
        }
    }
</script>

<style scoped>
    @import "../../assets/css/jpetstore.css";
</style>